<template>
    <div>
        <div>
            <div class="header_box">
                <div>
                    <van-icon class="icon" name="arrow-left" @click="back" />
                </div>
                <div name="center">添加分类</div>
                <div name="right"></div>
            </div>
        </div>
        <div class="p-1">
            <van-form @submit="onSubmit">
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>中文名称</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    name="classifyName"
                                    rows="2"
                                    autosize
                                    v-model="classifyName"
                                    placeholder="如招牌菜"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>英文名称</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    name="classifyNameEn"
                                    rows="2"
                                    autosize
                                    v-model="classifyNameEn"
                                    placeholder="Such as Specialty"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>分类描述</div></van-col>
                            <van-col span="16"
                                ><van-field
                                    name="describtion"
                                    rows="2"
                                    autosize
                                    v-model="describtion"
                                    placeholder="0/50"
                                    class="bg-light-secondary rounded"
                            /></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div class="py-1">
                    <van-cell-group class="font-mi">
                        <van-row class="a-center d-flex">
                            <van-col span="8"> <div>是否可用</div></van-col>
                            <van-col span="16">
                                <van-field name="switch">
                                    <template #input>
                                        <van-switch v-model="switchChecked" name="userful" size="20" />
                                    </template> </van-field
                            ></van-col>
                        </van-row>
                    </van-cell-group>
                </div>
                <div style="margin: 16px" class="text-center">
                    <van-button round block type="warning" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations } from 'vuex'
import { addGoodsClass } from '../../https/Commit.js'

export default {
    data() {
        return {
            dataList: [],
            switchChecked: false,
            classifyName: '',
            classifyNameEn: '',
            describtion: ''
        }
    },
    methods: {
        ...mapMutations(['CommAdd/AddClass']),
        back() {
            this.$router.go(-1)
        },
        onSubmit() {
            this.dataList.push(this.classifyName, this.classifyNameEn, this.describtion)
            console.log('submit', this.dataList)
            console.log(this.switchChecked)
            this.dataList.push(this.switchChecked)
            if (this.dataList.length < 4) {
                Toast.fail('请检查一下哦')
            } else {
                if (this.dataList[3] == true) {
                    this.dataList.splice(3, 1)
                    this.dataList.push(1)
                    console.log(this.dataList)
                    addGoodsClass(this.dataList)
                        .then((res) => {
                            console.log('成功', this.dataList, res)
                            Toast.success('修改成功')
                            this['CommAdd/AddClass'](this.dataList)
                            this.dataList = []
                            console.log(typeof this.dataList)
                            this.$router.push('/CommodityMan/CommClassification')
                        })
                        .catch((err) => {
                            console.log('失败', err)
                            this.dataList = []
                            console.log(typeof this.dataList)
                        })
                } else {
                    console.log(typeof this.dataList)
                    this.dataList.splice(3, 1)
                    this.dataList.push(2)
                    console.log(this.dataList)
                    addGoodsClass(this.dataList)
                        .then((res) => {
                            console.log(res)
                            Toast.success('修改成功')
                            this['CommAdd/AddClass'](this.dataList)
                            this.dataList = []
                            this.$router.push('/CommodityMan/CommClassification')
                        })
                        .catch((err) => {
                            console.log('失败', err)
                            this.dataList = []
                        })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped></style>
